<script setup lang="ts">
import { postMemberAddressAPI, getMemberAddressByIdAPI, putMemberAddressByIdAPI } from '@/services/Contact'
import { ref,reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app';
import { useMemberStore } from '@/stores'
const memberStore = useMemberStore()
const userId = memberStore.profile.userId
// 表单数据
const form = ref({
  userId:userId,
  relationName: '',
  relationTel: '', 
})
// 获取页面参数
const query = defineProps<{
  id: string
}>()
// 获取详情数据
const getMemberAddressByIdData = async () => {
  if (query.id) {
    const res = await getMemberAddressByIdAPI(query.id)
    // 把数据合并到表单中
    Object.assign(form.value, res.result)
  }
}
onLoad(() => {
  getMemberAddressByIdData()
})
// 设置动态标题
uni.setNavigationBarTitle({ title: query.id ? '修改联系人信息' : '新增联系人' })

// 收集是否默认联系人
const onSwitchChange: UniHelper.SwitchOnChange = (ev) => {
  form.value.isDefault = ev.detail.value ? 1 : 0
}
// 定义校验规则
const rules: UniHelper.UniFormsRules = {
  userId: {
      rules: [{ required: true, errorMessage: '请输入联系人id' }],
    },
  relationName: {
    rules: [{ required: true, errorMessage: '请输入联系人姓名' }],
  },
  relationTel: {
    rules: [
      { required: true, errorMessage: '请输入联系方式' },
      { pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号格式不正确' },
    ],
  },
}
const formRef = ref<UniHelper.UniFormsInstance>()

// 提交表单
const onSubmit = async () => {
  try {
    // 表单校验
    await formRef.value?.validate?.()
    // 校验通过后再发送请求
    if (query.id) {
      // 修改请求
      await putMemberAddressByIdAPI(query.id, form.value)
    } else {
      // 新建请求
      await postMemberAddressAPI(form.value)
    }
    // 成功提示
    uni.showToast({ icon: 'success', title: query.id ? '修改成功' : '添加成功' })
    // 返回上一页
    setTimeout(() => {
      uni.navigateBack()
    }, 400)
  } catch (error) {
    uni.showToast({ icon: 'error', title: '请填写完整信息' })
    console.log(form.value)
  }
}

</script>

<template>
  <view class="content">
    <uni-forms :rules="rules" :model="form" ref="formRef">
      <!-- 表单内容 -->
      <uni-forms-item name="userId" class="form-item">
        <text class="label">联系人id</text>
        <input class="input" placeholder="请填写联系人id" v-model="form.userId" />
      </uni-forms-item>
      <uni-forms-item name="relationName" class="form-item">
        <text class="label">联系人</text>
        <input class="input" placeholder="请填写联系人姓名" v-model="form.relationName" />
      </uni-forms-item>
      <uni-forms-item name="relationTel" class="form-item">
        <text class="label">手机号码</text>
        <input class="input" placeholder="请填写联系人手机号码" :maxlength="11" v-model="form.relationTel" />
      </uni-forms-item>
     <!-- <view class="form-item">
              <label class="label">设为默认联系人</label>
              <switch
                class="switch"
                color="#27ba9b"
                :checked="form.isDefault === 1"
                @change="onSwitchChange"
              />
            </view> -->
    </uni-forms>
  </view>
  <!-- 提交按钮 -->
  <button @tap="onSubmit" class="button">保存</button>
</template>
<style lang="scss">
page {
  background-color: #f4f4f4;
}

.content {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .form-item,
  .uni-forms-item {
    display: flex;
    align-items: center;
    min-height: 96rpx;
    padding: 25rpx 10rpx 40rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
    margin-bottom: 0;

    // 调整 uni-forms 样式
    .uni-forms-item__content {
      display: flex;
    }

    .uni-forms-item__error {
      margin-left: 200rpx;
    }

    &:last-child {
      border: none;
    }

    .label {
      width: 200rpx;
      color: #333;
    }

    .input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    .switch {
      position: absolute;
      right: -20rpx;
      transform: scale(0.8);
    }

    .picker {
      flex: 1;
    }

    .placeholder {
      color: #808080;
    }
  }
}

.button {
  height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>
